<template>
  <div class="layout-wrapper">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark" v-if="showHeader">
          <Header :userInfo="user" @change="handleChangeTab"></Header>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="content-wrapper" :class="{'fixTop': showHeader}" >
        <div class="grid-content bg-purple-dark" style="background: #1b232d;">
            <!-- <component :is="currentComponents"></component> -->
            <router-view></router-view>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Header from "@/views/header/header";
import { mapGetters } from "vuex";
import DeviceDetail from './DeviceDetail'
import DeviceManage from './DeviceManage'
import DeviceMap from './DeviceMap'
import WarningSystem from './WarningSystem'
export default {
  name: "Index",
  components: {
    Header,
    DeviceMap,
    DeviceDetail,
    DeviceManage,
    WarningSystem
  },
  data() {
    return {
      currentComponents:'DeviceScreen',
      showHeader:true
    };
  },
  computed: {
    ...mapGetters({
      user: 'user'
    }),
  },
  created() {
    // if(this.currentComponents == 'DeviceScreen') {
    //   this.showHeader = false
    // }
    // 用于刷新用
    if (sessionStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    }
    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  },
  methods:{
    handleChangeTab(item){
      this.currentComponents = item.comp
      console.log(item)
      // if(item.comp == 'DeviceScreen') {
      //   this.showHeader = false
      // }
      this.$router.push({
        path:item.path
      })
    }
  }
};
</script>
<style lang="less" scoped>
.content-wrapper {
  background: rgba(27, 35, 45, 1);
  border-top: 1px solid #ccc;
  height: 100vh;
  
  position: relative;
}
.fixTop {
  padding-top: 135px;
}
</style>
